<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    //我们的数据对象
    var data = {site: '菜鸟教程',url:"www.runoob.com",alexa:10000}
    var vm = new Vue({
        el:'#vue_det',
        data: data
    })
    //它们引用相同的对象！
    document.write(vm.site===data.site)//true
    document.write("<br>")
    //设置属性也会影响到原始数据
    vm.site = "Runoob"
    document.write(data.site+"<br>")//Runoob
    

    //反之亦然
    data.alexa = 1234
    document.write(vm.alexa)//1234
    </script>
</body>
</html>